<template>
  <div>

    <!-- 面包屑导航条 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据中心</el-breadcrumb-item>
      <el-breadcrumb-item>原材料编辑</el-breadcrumb-item>
    </el-breadcrumb>


    <el-card class="box-card">



      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="编号" prop="code">
              <el-input v-model="ruleForm.code" style="width: 200px" readonly="readonly"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原材料名称" prop="name">
              <el-input type="text" v-model="ruleForm.name" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="化元素叫法学" prop="chemical" label-width="110px">
              <el-input type="text" v-model="ruleForm.chemical" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密度" prop="density">
              <el-input type="text" v-model="ruleForm.density" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="硬度" prop="hardness">
              <el-input type="text" v-model="ruleForm.hardness" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="材料介绍" prop="remarks">
              <el-input type="text" v-model="ruleForm.remarks" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="单价" prop="price">
              <el-input type="text" v-model="ruleForm.price" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <el-button type="primary" @click="addSave()">保存</el-button>
              <el-button type="primary" @click="logout()">返回</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

    </el-card>

  </div>
</template>

<script>
  export default {
    name: 'UpdateById',
    data(){
      return{
        ruleForm:{
          name:'',
          chemical:'',
          density:0,
          hardness:'',
          remarks:'',
          price:0
        },
        rules:{
          name:[{required: true, message: '请输入名称', trigger: 'blur'}],
          chemical:[{required: true, message: '请输入化学元素叫法', trigger: 'blur'}],
          density:[
            {number: true, message: '请输入数字', trigger: 'blur'},
            {required: true, message: '请输入密度', trigger: 'blur'}
          ],
          hardness:[
            {number: true, message: '请输入数字', trigger: 'blur'},
            {required: true, message: '请输入硬度', trigger: 'blur'}
          ],
          remarks:[{required: true, message: '请输入材料介绍', trigger: 'blur'}],
          price:[
            {number: true, message: '请输入数字', trigger: 'blur'},
            {required: true, message: '请输入单价', trigger: 'blur'}
          ],
        }
      }
    },
    methods:{
      //回显数据
      getById:function (id) {
        this.$http.get("/material/getById/"+id).then((res)=>{
          this.ruleForm=res.data.result;
        });
      },
      //修改数据
      addSave:function () {
        this.$http.post("/material/save",this.ruleForm).then((res)=>{
          if(res.data.success){
            alert(res.data.message);
          }else{
            alert(res.data.message);
          }
        });
      },
      logout:function () {
        this.$router.push({ path: "/material" });
      }
    },
    mounted () {
      this.getById(this.$route.query.id);
    }
  }
</script>

<style scoped>

</style>
